<template>
  <div class="home-top">
    <div class="bg" :style="bg" v-if="bgFlag" :class={bg2:flag}>
      <home-header />
      <category />
    </div>
    <div class="bg1" v-else>
      <home-header />
      <category />
    </div>
  </div>
</template>

<script>
import Category from "../category";
import HomeHeader from "../homeHeader";
export default {
  data() {
    return {
      bgFlag:true
    };
  },
  props: ["bg", "flag"],

  components: {
    Category,
    HomeHeader,
  },
  created () {
    // if(){

    // }
  },
  methods: {
    srollPage() {
      let top = window.scrollY;
      if (top > 85) {
        this.bgFlag = false;
      } else {
        this.bgFlag = true;
      }
    },
  },
  mounted() {
     if(document.documentElement.scrollTop>85){
      this.bgFlag=false
    }
    window.addEventListener("scroll", this.srollPage, { passive: false });
  },
  destroyed() {
    window.removeEventListener("scroll", this.swiperData);
  },
};
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  height: 15rem;
  background-color: #e43124;
  position: absolute;
  top: 0rem;
  z-index: 2;
  border-radius: 0 0 30% 30%;
}
@keyframes hua {
  0% {
    top: -9rem;
  }
  100% {
    top: 0;
  }
}
.bg2{
  height: 15rem;
  background-color: #e43124;position: absolute;
  // top: -9rem;
  z-index: 2;
  border-radius: 0 0 30% 30%;
}
.bg1 {
  transition: all 0.5s;
  animation: hua 0.5s;
  width: 100%;
  height: 9rem;
  background-color: #e43124;
  position: fixed;
  top: 0;
  z-index: 10;
  // position: absolute;
  // top: -9.1rem;
  // z-index: -1;
  // border-radius: 0 0 30% 30%;
}
.top{
  margin-top: 5rem;
}
</style>